<template>
	<uni-nav-bar
		v-if="!sheep.$store('app').isWxBrowser"
		left-icon="left"
		height="100rpx"
		title="丝巾详情"
		fixed
		@clickLeft="goBack"
	/>
	<swiper
		class="swiper"
		circular
		:indicator-dots="indicatorDots"
		:autoplay="autoplay"
		:interval="interval"
		:duration="duration"
	>
		<swiper-item v-for="item in swiperList" :key="item">
			<img class="top-cotent-image" :src="item" />
		</swiper-item>
	</swiper>
	<view class="goodsDetail-container">
		<view class="goods-detail-intro">
			<view class="goods-item-cloumn">
				<view class="goods-intro-content">
					<!-- <view class="goods-detail-title"> 桑蚕丝大方巾</view> -->
					<view class="goods-id-copy">
						<view class="copy-detail">图片编码：{{ productCode }} </view>
						<img class="copy-icon" src="@/static/common/copy.png" @click="copyID" />
					</view>
					<view class="copy-detail change-title">设计师：{{ designer }} </view>
				</view>
				<view class="share-content" @click="openShare">
					<image
						class="share-icon"
						mode="aspectFill"
						src="./../../static/common/share.png"
					/>
					<div class="share-txt">分享</div>
				</view>
			</view>
			<view class="style-type">
				<view class="item-list active-item-list" v-for="item in styleTypeList" :key="item"
					>{{ item }}
				</view>
			</view>
			<view class="simple-intro">
				<view class="show-title"> 图文详情 </view>
				<img class="image" :src="detailImageUrls" />
			</view>
		</view>
		<!-- 规格弹窗 -->
		<uni-popup ref="popup">
			<view class="popup-box" style="border-radius: 16rpx 16rpx 0px 0px">
				<view class="goods-description">
					<img :src="previewImageUrl" />
					<view class="description-text">
						<!-- <view class="goods-name">丝巾名称 </view> -->
						<view class="goods-num">{{ productCode }} </view>
						<view class="purchase-quantity">
							<span style="white-space: nowrap; width: auto">数量</span>
							:<uni-number-box
								class="number-box"
								:min="min"
								v-model="form.num"
								@change="changeValue"
								:step="1"
							/>
						</view>
					</view>
				</view>
				<view class="select-specifications-box">
					<view class="select-specifications-title">选择规格 </view>
					<view class="select-specifications-list">
						<view
							class="item-list"
							v-for="(item, index) in specificationsList"
							:class="currentItemId === index ? 'active-item-list-specs' : ''"
							:key="item.id"
							@click="changeSpecificationsList(item, index)"
						>
							{{ item.nickname }}</view
						>
					</view>
				</view>
				<view class="add-to-cart-btn" @click="addCart">
					<b-button type="primary" style="border-radius: 50rpx; font-size: 32rpx"
						>加入购物袋</b-button
					>
				</view>
			</view>
		</uni-popup>
		<f-link-shareModal ref="linkShareRef" />
	</view>

	<f-add-to-cartBar
		:inCart="isInCart"
		@openDialog="openDialog"
		@shareClick="openShare"
		@cellectionClick="cellectionClick"
		:buttonText="buttonText"
		:collected="collected"
	/>
</template>

<script setup>
	import { ref, watch } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import goodsDetailApi from './../../sheep/api/goodsDetail.js';
	import cartApi from './../../sheep/api/cart.js';
	import collectionApi from './../../sheep/api/collection.js';
	const styleTypeList = ref([]);
	const currentItemId = ref(null);
	const swiperList = ref([]);
	const specificationsList = ref([]);
	const previewImageUrl = ref('');
	const popup = ref(null);
	const collected = ref(false);
	const selectedStyleType = (item) => {
		item.isActive = !item.isActive;
		console.log('item.value====>>', item);
	};

	const indicatorDots = ref(true);
	// 轮播图
	const autoplay = ref(true);
	const interval = ref(2000);
	const duration = ref(500);
	const min = 1;

	// 选择规格
	const changeSpecificationsList = (item, index) => {
		currentItemId.value = index;
		form.value.showName = item.name;
	};
	const productCode = ref(''); //图片编码
	const designer = ref(''); //设计师
	const detailImageUrls = ref('');
	const goodsId = ref('');
	onLoad((options) => {
		goodsId.value = options.id;
		// 拿商品详情数据
		goodsDetailApi.getGooosDetail(options).then((res) => {
			styleTypeList.value = res.data.festival.split(',');
			specificationsList.value = res.data.printTypes;
			//轮播图为主图+穿戴图，其中主图放在第一张
			swiperList.value = res.data.tryOnUrls;
			swiperList.value.unshift(res.data.previewImageUrl);

			productCode.value = res.data.name;
			designer.value = res.data.designer;
			detailImageUrls.value = res.data.detailImageUrls;
			// 当前商品的收藏状态
			collected.value = res.data.favorite;
			previewImageUrl.value = res.data.previewImageUrl;
			// 加购状态
			buttonText.value = res.data?.joinedCart ? '已加购' : '加入购物袋';
		});
	});
	const linkShareRef = ref();
	const openShare = () => {
		linkShareRef.value.open();
	};
	const goBack = () => {
		sheep.$router.back();
	};
	const cellectionClick = (tag) => {
		let data = {
			ids: [`${goodsId.value}`],
		};
		collected.value = !collected.value;
		if (collected.value) {
			//添加收藏
			collectionApi.addCollectionList(data).then((res) => {
				return uni.showToast({
					title: '已收藏',
					icon: 'success',
					mask: true,
				});
			});
		} else {
			//取消收藏
			collectionApi.cancelCollectionList(data).then((res) => {
				return uni.showToast({
					title: '已取消',
					icon: 'success',
					mask: true,
				});
			});
		}
		// 调接口
	};

	const form = ref({
		isInCart: false,
		num: 1,
		showName: '',
	});
	const changeValue = (value) => {
		form.value.num = value;
	};
	/**
	 * 复制图片编码
	 */
	const copyID = () => {
		sheep.$helper.copyText(productCode.value);
	};
	const openDialog = () => {
		popup.value.open('bottom');
		resetFields();
	};
	const buttonText = ref('加入购物袋');
	const addCart = () => {
		if (!form.value.num) {
			return uni.showToast({
				title: '请选择商品数量',
				icon: 'error',
				mask: true,
			});
		}
		if (!form.value.showName) {
			return uni.showToast({
				title: '请选择商品规格',
				icon: 'error',
				mask: true,
			});
		}
		let data = {
			imageId: goodsId.value,
			printType: form.value.showName,
			count: form.value.num,
		};
		cartApi.appendCart(data).then((res) => {
			buttonText.value = '已加购';
			popup.value.close();
			uni.showToast({
				title: '该商品已添加至购物袋',
				icon: 'success',
				mask: true,
			});
		});
	};
	// 重置表单
	const resetFields = () => {
		// 表单重置
		form.value = {
			isInCart: false,
			num: 1,
			showName: undefined,
		};
		// 当前选中项重置
		currentItemId.value = null;
	};
</script>

<style lang="scss" scoped>
	::v-deep .swiper {
		height: 750rpx !important;
	}
	.top-cotent-image {
		width: 750rpx;
		height: 750rpx;
		object-fit: contain;
	}
	.popup-box {
		height: 878rpx;
		padding: 40rpx 32rpx 0;
		background: #ffffff;
		.goods-description {
			width: 540rpx;
			height: 248rpx;
			display: flex;
			justify-content: space-between;
			img {
				height: 100%;
				object-fit: contain;
			}
			.description-text {
				padding-left: 16rpx;
				.goods-name {
					height: 56rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 40rpx;
					color: #111111;
					text-align: left;
					font-style: normal;
				}
				.goods-num {
					width: 236rpx;
					height: 44rpx;
					margin-top: 8rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #666666;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
				}
				.purchase-quantity {
					margin-top: 32rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #111111;
					font-style: normal;
					.number-box {
						padding-left: 24rpx;
					}
				}
			}
		}
		.select-specifications-box {
			width: 668rpx;
			margin-top: 32rpx;
			.select-specifications-title {
				width: 134rpx;
				height: 44rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #111111;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
			}
			.select-specifications-list {
				max-height: 256rpx;
				overflow: scroll;
				margin-top: 24rpx;
				padding-top: 32rpx;
				border-top: 1px solid #d8d8d8;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				.active-item-list-specs {
					background: #ff6c01 !important;
					color: #ffffff !important;
				}
				.item-list {
					width: 310rpx;
					height: 52rpx;
					margin: 10rpx;
					background: #eef0f2;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					font-style: normal;
				}
			}
		}
		.add-to-cart-btn {
			width: 668rpx;
			height: 88rpx;
			position: absolute;
			top: 90%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.goodsDetail-container {
		padding: 0 32rpx;
		.goods-detail-intro {
			.goods-item-cloumn {
				margin-top: 24rpx;
				display: flex;
				.goods-intro-content {
					flex: 6;
					.goods-detail-title {
						height: 56rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 40rpx;
						color: #111111;
						line-height: 56rpx;
						text-align: left;
						font-style: normal;
					}
					.goods-id-copy {
						width: 422rpx;
						height: 44rpx;
						margin-top: 16rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.copy-icon {
							width: 40rpx;
							height: 40rpx;
							object-fit: contain;
						}
					}
					.copy-detail {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #666666;
						line-height: 44rpx;
						text-align: left;
						font-style: normal;
					}
					.change-title {
						white-space: nowrap;
						width: auto;
						height: 44rpx;
						margin-top: 8rpx;
					}
				}
				.share-content {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					.share-icon {
						width: 40rpx;
						height: 40rpx;
					}
					.share-txt {
						margin-top: 8rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #111111;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
					}
				}
			}
			.style-type {
				margin-top: 24rpx;
				padding-top: 24rpx;
				border-top: 1rpx solid #d8d8d8;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				.active-item-list {
					border: 1rpx solid #ff6c01;
					box-sizing: border-box;
				}
				.item-list {
					width: 156rpx;
					height: 48rpx;
					margin: 7rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: rgba(255, 108, 1, 0.05);
					border-radius: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #ff6c01;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
				}
			}
			.simple-intro {
				margin-top: 24rpx;
				padding-bottom: 200rpx;

				.show-title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #111111;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
				}
				.image {
					width: 100%;
					margin-top: 24rpx;
				}
			}
		}
	}
</style>
